import { View, Text, Image } from '@tarojs/components';
import cssModule from './index.module.scss';
import { defaultAvatar } from '@/utils/content';
import { useUserStore } from '@/business/store/user/login';

/**
 * @description 用户卡片
 * @author Shawn
 */

// 组件接收的参数
interface DefaultPageProps {
  isDetail?: boolean; // 是否显示详情
  item: any; // 用户数据
  btnName?: string; // 按钮类型
  btnName2?: string; // 第二个按钮类型
  type?: string;
  handleClick?: (item: any) => void; // 按钮点击事件
  handleClick2?: (item: any) => void; // 第二个按钮点击事件
  handleClick3?: (item: any) => void; // 打开用户操作菜单
}

export default function UserCard({ item = {}, btnName, btnName2, handleClick, handleClick2, handleClick3, isDetail = false, type }: DefaultPageProps) {
  const useUser = useUserStore()

  // 格式化手机号，中间四位用*
  const formatPhoneNumber = (phone: string) => {
    if (!phone || phone.length !== 11) return phone;
    return phone.slice(0, 3) + '****' + phone.slice(7);
  };

  // 按钮点击
  const handleBtnClick = (e) => {
    e.stopPropagation();
    handleClick?.(item);
  }

  const handleBtnClick2 = () => {
    handleClick2?.(item);
  }

  const handleBtnClick3 = () => {
    handleClick3?.(item);
  }

  return (
    <View className={cssModule.container}>
      {
        useUser.userInfo.userId !== item.userId &&
        (item.friendStatus == '1' && btnName === '加好友'
          ? <View className={cssModule.yitianjia}>已添加</View>

          : item.friendStatus == '0' && btnName === '加好友' ? <View className={cssModule.yitianjia}>待好友验证</View> :
            btnName && <View className={cssModule.addBtn} onClick={handleBtnClick}>
              <Text>{btnName}</Text>
            </View>)
      }
      {
        btnName2 && <View className={cssModule.addBtn2} onClick={handleBtnClick2}>
          <Text>{btnName2}</Text>
        </View>
      }
      <View>
        <View className={cssModule.header}>
          <View className={cssModule.avatar} onClick={handleBtnClick3} >
            <Image src={item.headImg || defaultAvatar} mode='aspectFill' />
          </View>
          <View className={cssModule.userInfo}>
            <View className={cssModule.userName}>
              <Text>{item.remark || item.name || item.applicantName || '用户**'}</Text>
              <Text>{formatPhoneNumber(item.contactMobile)}</Text>
              {
                item.isVip && <View className={cssModule.vip}>
                  <Image src='https://baoyouqun.cn/files/static/images/vip.png' mode='aspectFill' />
                </View>
              }
            </View>
            <View className={cssModule.userMeta}>
              <View className={cssModule.userStatus}>
                <View
                  className={`${cssModule.statusDot} ${item.isOnline ? cssModule.online : cssModule.offline}`}
                />
                <Text>
                  {item.isOnline ? '在线' : '离线'}
                </Text>
              </View>
              <View className={cssModule.divider}>|</View>
              <View className={cssModule.userLocation}>
                {type === 'distance' ? <Text>{item.distance || ''}</Text> : <Text>{item.cityName || (item.province + item.city + item.district) || item.region || '未知'}</Text>}

              </View>
            </View>
          </View>
        </View>
        {!isDetail && <View className={cssModule.content}>

          {
            (item.topResources && item.topResources.length > 0) && <View className={cssModule.tag}>
              <View className='pl-4 grid gap-2 grid-cols-[1fr_2fr]'>
                {
                  item.resourceCount > 0 &&
                  <View className='text-[28px] p-1 text-center text-[#0079FE] bg-[#E6F0FF]'>
                    Ta有{item.resourceCount}个资源
                  </View>
                }

                {
                  <View className='text-[28px] p-1 flex-2 text-[#1D2129] truncate'>
                    <Text>
                      {item.topResources.join('，')}
                    </Text>
                  </View>
                }
              </View>
            </View>
          }

          {
            (item.topNeeds && item.topNeeds > 0) && <View className={cssModule.tag}>
              <View className='pl-4 mt-2 grid gap-2 grid-cols-[1fr_2fr]'>
                {
                  item.needCount > 0 && <View className='text-[28px] p-1 text-center text-[#FF9F00] bg-[#FFF4E6]'>
                    Ta有{item.needCount}个需求
                  </View>
                }

                {
                  <View className='text-[28px] p-1 flex-2 text-[#1D2129] truncate'>
                    <Text>
                      {item.topNeeds.join('，')}
                    </Text>
                  </View>
                }
              </View>
            </View>
          }
        </View>}
      </View>
    </View>
  );
}
